<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文字效果</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* html,
    body {
        width: 100%;
        height: 100%;
    } */

    .box{
        width: 500px;
        margin:0 auto;
        font-weight: bolder;
    }
    .box>div{
        height: 50px;
        text-align: center;
        background-color: saddlebrown;
        color: wheat;
        
    }
    .box>div:nth-child(1){
        color: #333;
        background-color: wheat;
    }
    .box>div:nth-child(1) p{
        text-shadow: 4px 2px 2px black;
    }
    
    .box>div p{
        text-shadow: 4px 2px 2px hsla(0, 0%, 100%, 0.8);
    }
    .box>div:nth-child(3) p{
        text-shadow: 0 0 0.1rem wheat,0 0 0.3rem wheat,0 0 0.5rem wheat;
    }
    .box>div:nth-child(4) p{
        text-shadow: 0 1px hsla(0, 0%, 85%),0 2px hsla(0, 0%, 80%),0 3px hsla(0, 0%, 75%),0 4px hsla(0, 0%, 70%),0 5px hsla(0, 0%, 65%),0 5px 10px black;
    }
    .box>div:nth-child(5) p{
        text-shadow: 1px 1px black,2px 2px black,3px 3px black,4px 4px black,5px 5px black,6px 6px black,7px 7px black,8px 8px black;
    }
</style>

<body>
    <div class="box">
        <!-- 文字阴影 -->
        <div>
            <p>css文字</p>
        </div>
        <div>
            <p>css文字</p>
        </div>
        <!-- 文字发光 -->
        <div>
            <p>css文字</p>
        </div>
        <!-- 3d文字 -->
        <div>
            <p>css文字</p>
        </div>
        <div>
            <p>css文字</p>
        </div>
    </div>
</body>

</html>